<template>
  <div
    @click.capture="hideMenu"
    class="maxBox"
    :style="`background-image:url(${imgData[flag]});`"
  >
    <div class="select">
      <aside
        @click="select = 0"
        :class="{ shadow: select == 0 }"
        @dblclick="showModel"
      >
        <img
          src=""
          alt=""
        />
        <p>换背景</p>
      </aside>
      <aside @click="select = 1" :class="{ shadow: select == 1 }">
        <img
          src="https://tse3-mm.cn.bing.net/th/id/OIP-C.Hft026eV4K3kU-05uNWYMAHaHa?w=143&h=150&c=7&r=0&o=5&dpr=1.25&pid=1.7"
          alt=""
        />
        <p>浏览器</p>
      </aside>
    </div>
    <!-- 弹框 -->
    <Model title="换皮肤" @hideModel="hideModel" v-if="isshowModel" :bg="imgData[flag]">
      <template>
        <div class="tap">
          <img
            :class="{ active: flag == index }"
            @click="switchImg(index)"
            v-for="(item, index) in imgData"
            :key="index"
            :src="item"
            alt=""
          />
        </div>
      </template>
    </Model>

    <footer>
      <div v-if="menuFlag" class="menu">
        <ul>
          <li>菜单</li>
        </ul>
      </div>
      <img
        @click="openMenu"
        src=""
        alt=""
      />
    </footer>
  </div>
</template>

<script>
import Model from "../components/model.vue";
export default {
  data() {
    return {
      imgData: [
        "https://tse2-mm.cn.bing.net/th/id/OIP-C.jJdb8c7Y-KrEGnPoaRs4XAHaHa?w=144&h=150&c=7&r=0&o=5&dpr=1.25&pid=1.7",
        "https://tse2-mm.cn.bing.net/th/id/OIP-C.QOKhRrd135YciGiVG6MYBQAAAA?w=144&h=150&c=7&r=0&o=5&dpr=1.25&pid=1.7",
        "https://tse2-mm.cn.bing.net/th/id/OIP-C.70HaJIj9TGefPqBaNsLsLgAAAA?w=150&h=150&c=7&r=0&o=5&dpr=1.25&pid=1.7",
      ],
      menuFlag: false,
      flag: 0,
      isshowModel: false,
      select: -1,
    };
  },
  mounted() {},
  methods: {
    openMenu() {
      this.menuFlag = true;
    },
    hideMenu() {
      this.menuFlag = false;
        this.select = -1
    },
    switchImg(index) {
      this.flag = index;
    },
    showModel() {
      this.isshowModel = true;
    },
    hideModel() {
      this.isshowModel = false;
    },
  },
  components: { Model },
};
</script>

<style lang="scss">
.maxBox {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .select {
    width: 100px;
    height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-left: 20px;
    img {
      width: 100%;
      height: 70%;
    }
    aside {
      width: 80px;
      height: 100px;
      p{
        text-align: center;
        font-size: 13px;
      }
    }
  }
  .tap {
    width: 100%;
    height: 100px;
    margin-top: 176px;
    img {
      width: 166px;
      height: 100%;
    }
  }
  .active {
    border: 1px solid rgb(12, 218, 183);
  }
  .shadow {
    box-shadow: 0 0 2px 5px rgba(22, 22, 201, 0.4);
  }
}

footer {
  width: 100%;
  height: 40px;
  background-color: rgb(25, 50, 160);
  position: fixed;
  left: 0;
  bottom: 0;
  img {
    width: 40px;
    height: 40px;
    background-color: red;
  }
  .menu {
    width: 200px;
    height: 500px;
    background-color: #fff;
    position: absolute;
    bottom: 40px;
    left: 0;
  }
}
</style>
